<%@ page import="com.wanmait.recruitment.controller.AdminController" %>
<%@ page import="com.wanmait.recruitment.util.CookieUtil" %>
<!doctype html>
<%@page contentType="text/html; charset=utf-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<style type="text/css">
    td {
        text-align: center;
    }

    .state_act {
        color: green;
    }

    .state_dis {
        color: red;
    }

    .hidden,.logWin {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
    }

    .popup {
        width: 500px;
        height: 300px;
        position: absolute;
        top: 150px;
        left: 700px;
        background-color: #FFFFFF;
        z-index: 100;
        border: solid 7px #00FFFF;
    }
    .log_popup {
        width: 400px;
        height: 555px;
        position: absolute;
        top: 50px;
        left: 700px;
        background-color: #FFFFFF;
        z-index: 100;
        border: solid 7px #000000;
        padding: 10px;
    }
    .log_popup ul{
        margin: 0;
        padding: 0;
    }
    .log_popup ul li{
        background-color: #CCC;
        list-style: none;
        padding: 5px;
        float: left;
        border: solid 1px #000000;
        width: 185px;
        text-align: center;
    }
    .popup span {
        position: absolute;
        margin-top: 50px;
        margin-left: 100px;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
    }
    .popup span input{
        width: 200px;
        height: 30px;
    }
    .popup .button{
        margin-top: 130px;
    }
    .popup .button input{
        float: left;
        width: 100px;
        height: 50px;
        margin-right: 50px;
        background-color:#1E9FFF;
    }
    .prompt{
        color: red;
        display: none;
    }
    .state_act{
        background-color: #00FF00;
        color: #FFFFFF;
        padding: 3px;
    }
    .state_dis{
        background-color: #d6d6d6;
        color: #000000;
        padding: 3px;
    }
</style>
<script type="text/javascript" src="/static/js/jquery-3.5.1.min.js"></script>
<script>
    var uname = null;
    var upass = null;
    var uid = null;
    $(function(){
        $("#insert").click(getClickAdmin);
        $("#cancelWin").click(cancelWin);
        $("#confirm").click(confirm);
        $(".result-tab").on("click",".link-update",function(){
            getClickAdmin(this);
        });
        $(".result-tab").on("click",".state",function(){
            disable(this);
        });
        $("#chooseAll").click(function(){
            $(":checkbox[id=choose]").prop("checked",$(this).prop("checked"));
        });
        $("#batchDis").click(function(){
            batchOperate("dis");
        });
        $("#batchAct").click(function(){
            batchOperate("act");
        });
        $(".result-tab").on("click",".log",function(){
            openLogWin(this);
        });
        $(".logWin").click(function(){
            $(".logWin").css("display","none");
        });
        <c:if test="${!empty cookie.uid.value}">
             openLog();
        </c:if>
    });
    function openLog(){
        $(".logWin").css("display","block");
    }
    //打开日志窗口
    function openLogWin(object){
        var id = $(object).attr("id");
        $.ajax({
            url:"/manage/admin/saveUid",
            data:{uid:id},
            type:"get",
            async:false,
            success:function(){
                location.reload();
            }
        });
    }
    //批量停用
    function batchOperate(opreate){
        var ids = new Array();
        $(":checked[id=choose]").each(function(){
            var id = $(this).val();
            var state = $("#state"+id+" span").html();
            if(state!="已停用"&&opreate=="dis"){
                ids.push(id);
            }
            if(state!="已激活"&&opreate=="act"){
                ids.push(id);
            }
        });
        if(ids.length>0){
            $.ajax({
                url:"/manage/admin/batchOpreate",
                data:{ids:ids},
                type:"get",
                async:false,
                success:function(){
                    for (var i = 0; i < ids.length ; i++) {
                        $(":checked[id=choose]").each(function(){
                            if($(this).val()==ids[i]){
                                if(opreate=="dis"){
                                    $("#state" + ids[i] + " span").attr("class", "state_dis");
                                    $("#state" + ids[i] + " span").html("已停用");
                                    $("#change"+ids[i]+" .state").html("激活");
                                }
                                if(opreate=="act"){
                                    $("#state" + ids[i] + " span").attr("class", "state_act");
                                    $("#state" + ids[i] + " span").html("已激活");
                                    $("#change"+ids[i]+" .state").html("停用");
                                }
                            }
                        });
                    }
                }
            });
        }
    }
    //停用和激活管理员
    function disable(object){
        var id = $(object).attr("id");
        var state = $(object).html();
        var enable;
        if(state=="激活"){
            enable = true;
        }
        if(state=="停用"){
            enable = false;
        }
        $.ajax({
            url:"/manage/admin/update",
            data:{id:id,enable:enable},
            type:"get",
            async:false,
            success:function() {
                if (state=="停用") {
                    $("#state" + id + " span").attr("class", "state_dis");
                    $("#state" + id + " span").html("已停用");
                    $(object).html("激活");
                }
                if(state=="激活"){
                    $("#state" + id + " span").attr("class", "state_act");
                    $("#state" + id + " span").html("已激活");
                    $(object).html("停用");
                }
            }
        });
    }
    //确认按钮
    function confirm(){
        if(uname==null&&upass==null){
            insert();
        }
        else{
            updateAdmin();
        }
    }
    //修改管理员
    function updateAdmin(){
        var username = $("#username").val();
        var userpass = $("#userpass").val();
        if(username!=uname||userpass!=upass){
            $.ajax({
                url:"/manage/admin/update",
                data:{username:username,userpass:userpass,id:uid},
                type:"get",
                async:false,
                success:function(){
                    $("#username"+uid).html(username);
                    $("#userpass"+uid).html(userpass);
                    cancelWin();
                }
            });
        }
    }
    //关闭编辑窗口
    function cancelWin(){
        $(".hidden").css("display","none");
    }
    //打开编辑窗口
    function openWin(username,userpass){
        $("#username").val(username);
        $("#userpass").val(userpass);
        $(".hidden").css("display","block");
    }
    //获取点击的管理员
    function getClickAdmin(object){
        uname = null;
        upass = null;
        uid = null;
        var id = $(object).attr("id");
        var username = "";
        var userpass = "";
        if(id!=null){
            var username = $("#username"+id).html();
            var userpass = $("#userpass"+id).html();
            uname = $("#username"+id).html();
            upass = $("#userpass"+id).html();
            uid = id;
        }
        openWin(username,userpass);
    }
    //添加管理员
    function insert(){
        var username = $("#username").val();
        var userpass = $("#userpass").val();
        if(username!=""&&userpass!=""){
            $.ajax({
                url:"/manage/admin/insert",
                data:{username:username,userpass:userpass},
                type:"get",
                async:false,
                success:function(mes){
                    if(mes==0){
                        $(".prompt").css("display","block");
                    }
                    if(mes==1){
                        location.reload();
                    }
                }
            });
        }
    }
</script>
<jsp:include page="/manage/inc/header"></jsp:include>
<jsp:include page="/manage/inc/menu"></jsp:include>
<div class="main-wrap">
    <div class="crumb-wrap">
        <div class="crumb-list"><i class="icon-font"></i><a href="/index.jsp">首页</a><span
                class="crumb-step">&gt;</span><span class="crumb-name">管理员管理</span></div>
    </div>
    <div class="result-wrap">
        <form name="myform" id="myform" method="post">
            <div class="result-title">
                <div class="result-list">
                    <a href="javascript:;" id="insert"><i class="icon-font"></i>新增管理员</a>
                    <a id="batchDis" href="javascript:void(0)"><i class="icon-font">&#xe020;</i>批量停用</a>
                    <a id="batchAct" href="javascript:void(0)"><i class="icon-font">&#xe025;</i>批量激活</a>
                </div>
            </div>
            <div class="result-content">
                <table class="result-tab" width="100%">
                    <tr>
                        <th class="tc" width="5%"><input class="allChoose" id="chooseAll" type="checkbox"></th>
                        <th>ID</th>
                        <th>账号</th>
                        <th>密码</th>
                        <th>添加时间</th>
                        <th>登录次数</th>
                        <th>账号状态</th>
                        <th>操作</th>
                    </tr>
                    <c:forEach items="${admins}" var="admin">
                        <tr>
                            <td class="tc"><c:if test="${!admin.isSuper}"><input value="${admin.id}" type="checkbox" id="choose"></c:if></td>
                            <td>${admin.id}</td>
                            <td id="username${admin.id}">${admin.username}</td>
                            <td id="userpass${admin.id}">${admin.userpass}</td>
                            <td><fmt:formatDate value="${admin.inputTime}"
                                                pattern="yyyy-MM-dd hh:mm:ss"></fmt:formatDate></td>
                            <td>${admin.loginCount}</td>
                            <td id="state${admin.id}">
                                <c:if test="${admin.enable}"><span class="state_act">已激活</span></c:if>
                                <c:if test="${!admin.enable}"><span class="state_dis">已停用</span></c:if>
                            </td>
                            <td id="change${admin.id}">
                                <c:if test="${!admin.isSuper}">
                                    <a class="link-update"  id="${admin.id}" href="javascript:;">修改</a>
                                    <a class="state" id="${admin.id}" href="javascript:;"><c:if test="${!admin.enable}">激活</c:if><c:if test="${admin.enable}">停用</c:if></a>
                                </c:if>
                                <a class="log" id="${admin.id}" href="javascript:;">日志</a>
                            </td>
                        </tr>
                    </c:forEach>
                </table>
            </div>
        </form>
    </div>
</div>
<!--/main-->
</div>
<!--信息修改弹框-->
<div style="display: none;" class="hidden">
    <div class="popup">
        <span>账号:<input type="text" id="username"></span><br><br>
        <span>密码:<input type="text" id="userpass"></span><br><br>
        <span class="prompt">该管理员已存在！</span>
        <span class="button">
            <input type="button" value="确认" id="confirm">
            <input type="button" value="取消" id="cancelWin">
        </span>
    </div>
</div>
<!--登录log-->
<div style="display: none;" class="logWin">
    <div class="log_popup">
        <ul>
            <li>登录IP</li>
            <li>登录时间</li>
        </ul>
        <c:forEach items="${admins}" var="admin" varStatus="stat">
            <c:if test="${admin.id eq cookie.uid.value}">
                <c:set var="start" value="${fn:length(admin.adminLoginIps)-1}"></c:set>
                <c:set var="ips" value="${admin.adminLoginIps}"></c:set>
                <c:forEach items="${ips}" var="log" varStatus="stat" end="15">
                    <ul>
                        <li>${ips[start-stat.index].ipAddress}</li>
                        <li><fmt:formatDate value="${ips[start-stat.index].loginTime}" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate></li>
                    </ul>
                </c:forEach>
            </c:if>
        </c:forEach>
    </div>
</div>
</body>
</html>